<template>
  <div class="ele-body">
    <!-- 搜索表单 -->
    <WarehouseSearch @search="reload"  />
    <!-- 数据表格 -->
    <el-card shadow="never">
      <ele-pro-table
        ref="table"  row-key="id" :columns="columns" :datasource="datasource"  :cell-style="cellStyle"
        :need-page="false"  @done="onDone" :height="tableHeight" :full-height="tableFullHeight"
      >
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-button
          v-permission="'Basic_WareHouse_Add'"
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="openEdit({},'1')"
          >
            添加
          </el-button>
          <el-button
          v-permission="'Basic_WareHouse_Export'"
            size="small"
            icon="el-icon-upload2"
            class="ele-btn-icon"
            @click="reportexcel"
          >
            导出
          </el-button>
          <div class="ele-space" style="float: right; margin-top: 5px;">
              <div class="list-tool-item" style="margin-right: 5px;">
                <span>作废数据</span>&nbsp;
                <el-switch
                  :active-value= 1
                  :inactive-value= 0
                  v-model="isDeleted"
                  @change="editState"
                  >
            </el-switch>
              </div>
              <div class="list-tool-divider" style="margin-right: 5px;">
                <el-divider direction="vertical" />
              </div>
          </div>
        </template>
        <template slot="status" slot-scope="{row}">
            <el-switch
              :active-value=0
              :inactive-value=1
              active-color="#1890ff"
              inactive-color="red"
              v-model="row.status"
              @change="editStatusState(row)"
              >
            </el-switch>
        </template>
        <template slot="isSys" slot-scope="{row}">
            <el-switch
              :active-value= true
              :inactive-value= false
              active-color="#1890ff"
              inactive-color="red"
              v-model="row.isSys"
              @change="editState(row)"
              >
            </el-switch>
        </template>
        <!-- 标题列 -->
        <template slot="title" slot-scope="{ row }">
          <i :class="row.icon"></i> {{ row.title }}
        </template>
        <!-- 操作列 -->
        <template slot="action" slot-scope="{ row }">
          <el-link  type="primary"  :underline="false"  icon="el-icon-edit" v-permission="'Basic_WareHouse_Update'" @click="openEdit(row,'2')" >修改</el-link>
          <el-popconfirm   v-if="row.deleted!=1" class="ele-action" title="确定要作废吗？" @confirm="remove(row)" >
            <el-link type="danger" slot="reference" v-permission="'Basic_WareHouse_Delete'" :underline="false" icon="el-icon-delete" >作废</el-link>
          </el-popconfirm>
          <el-link  type="primary"  :underline="false"  icon="el-icon-view" @click="openEdit(row,'3')" >详情</el-link>
        </template>
      </ele-pro-table>
    </el-card>
    <!-- 编辑弹窗 -->
    <warehouse-edit :data="current" :visible.sync="showEdit" @done="reload"  :btnindex="btnindex"/>
    <!-- 导出数据 -->
    <ExportDialog ref="ExportDialog"></ExportDialog>
  </div>
</template>

<script>
  import WarehouseEdit from './components/inwarehouse-edit';
  import WarehouseSearch from './components/inwarehouse-search';
  import ExportDialog from '@/components/Excel/ExportDialog'
  import { QueryWarehousePageList ,DeleteWarehouse,SetDefaultWarehouse,UpdateStatus } from '@/api/basicdatamanager/warehousemanager';
  export default {
    name: 'UserRole',
    components: { WarehouseEdit,WarehouseSearch,ExportDialog},
    data() {
      return {
        // 表格列配置
        columns: [
          {columnKey: 'index', type: 'index', width: 50, align: 'center', showOverflowTooltip: true, fixed: 'left', label:'序号',},
          {prop: 'code', label: '仓库代码', showOverflowTooltip: true, sortable: 'code',align: 'center',},
          {prop: 'name', label: '仓库名称', showOverflowTooltip: true, sortable: 'name',align: 'center',},
          {prop: 'accountName', label: '仓库负责人', showOverflowTooltip: true, sortable: 'accountName',align: 'center',},
          {prop: 'isSys', label: '是否默认仓库', slot: 'isSys',showOverflowTooltip: true, align: 'center',},
          {prop: 'createUserName', label: '创建人', showOverflowTooltip: true, align: 'center',sortable: 'createUserName',},
          {
            prop: 'createDate', label: '创建时间', showOverflowTooltip: true,  align: 'center',sortable: 'createDate',
            formatter: (row, column, cellValue) => {return this.$util.toDateString(cellValue);}
          },
          // {prop: 'statusDesc', label: '状态', align: 'center',},
          {columnKey: 'action', label: '操作', width: 230, align: 'center', resizable: false,slot: 'action', hideInSetting: true, showOverflowTooltip: true}
        ],
        isDeleted: 0,
        fixedHeight:true,
        // 当前编辑数据
        current: null,
        // 是否显示编辑弹窗
        showEdit: false,
        //操作按钮索引
        btnindex: '1',
        // 导出列
        exportList: [
          { name: "仓库名称", keys: "name", status: true },
          { name: "仓库代码", keys: "code", status: true },
          { name: "仓库负责人", keys: "accountName", status: true },
          { name: '是否默认仓库', keys: 'isSysDesc', status: true, },
          { name: "创建人", keys: "createUserName", status: true },
          { name: "创建时间", keys: "createDate", status: true },
          // { name: "状态", keys: "statusDesc", status: true },
        ],
      };
    },
    computed: {
        // 表格高度
        tableHeight() {
          var fh = this.fixedHeight ? 'calc(100vh - 200px)' : void 0;
          return fh;
        },
        // 表格全屏时高度
        tableFullHeight() {
          var fh =  this.fixedHeight ? 'calc(100vh - 126px)' : null;
          return fh;
        },
      },
    methods: {
      /* 表格数据源 */
      async datasource(params) {
        params.where.pageindex = params.page;
        params.where.pagesize = params.limit;

        //添加排序
        if(params.order.order == null || params.order.order == undefined){
          params.where.orderBys = [{ sort: "createDate", order: 1, }];
        }else{
          params.where.orderBys = [];
          params.where.orderBys.push({sort:params.sorter.column.sortable,order:params.order.order=='asc'?0:1});
        }

        if(!params.where.conditions)params.where.conditions= [];
        params.where.conditions.push({ key:"status",operator: 0,value: 0,})

        let delIndex = params.where.conditions.findIndex((g)=>{
          return g.key == 'deleted';
        })

        if(delIndex>=0){
          params.where.conditions.splice(delIndex,1)
          params.where.conditions.push({ key:"deleted", operator: 0, value: this.isDeleted})
        }else{
          params.where.conditions.push({
            key:"deleted",
            operator: 0,
            value: this.isDeleted,
          });
        }
        let warehouses = await QueryWarehousePageList(params.where);

        if(warehouses && warehouses.items){
          warehouses.items.map((m)=>{
            m.grey = this.isDeleted;
          })
        }

        return{ list:warehouses.items,count:warehouses.totalrecords}
      },

      editState(){
        this.reload();
      },

      /* 表格渲染完成回调 */
      onDone({ data }) {
        this.roleList = data;
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ where: where });
      },
      
      /**
       * 显示编辑
       * @param row 当前行对像
       * @param index 操作索引
       */
      openEdit(row,index) {
        this.current = row;
        this.showEdit = true;
        this.btnindex = index;
      },
     
      /* 删除 */
      remove(row) {
        const loading = this.$loading({ lock: true });
        DeleteWarehouse(row.id)
          .then((msg) => {
            loading.close();
            this.$message.success(msg);
            this.reload();
          })
          .catch((e) => {
            loading.close();
            this.$message.error(e.message);
          });
      },
      /* 导出 */
      reportexcel(pams) {
        
        this.$refs.ExportDialog.showEdits = true
        this.$refs.ExportDialog.checkList = this.exportList
        this.$refs.ExportDialog.titleName = "仓库列表"
        this.$refs.ExportDialog.dataList = this.$refs.table.tableData;
         
      },

      /* 更改状态 */
      // editState(row) {
      //   const loading = this.$loading({ lock: true });
      //   SetDefaultWarehouse(row.id)
      //   .then((msg)=>{
      //       loading.close();
      //       this.$message.success(msg);
      //       this.reload();
      //   }).catch((e)=>{
      //       loading.close();
      //       this.$message.error(msg);
      //   });
      // },

      /* 更改状态 */
      editStatusState(row) {
        const loading = this.$loading({ lock: true });
        UpdateStatus(row)
        .then((msg)=>{
            loading.close();
            this.$message.success(msg);
            this.reload();
        }).catch((e)=>{
            loading.close();
            this.$message.error(msg);
        });
      },

      /* 样式 */
      cellStyle(param){
          let cellStyle;
          const { row, column, rowIndex, columnIndex } = param;
          switch(row.grey == 1){
            case true:
              cellStyle = 'background-color: RGB(240,242,245)';
              break;
            default:
              if(columnIndex==6||columnIndex==7){
                cellStyle = 'color:var(--color-primary)';
              }
              break;
          }
          return cellStyle;
        },

    }
  };
</script>

<style scoped>
 
 /* ::v-deep .el-table__body-wrapper {
    height: 450px !important;
    overflow-y:auto !important;
  } */
</style>
